<template>
	<!-- 电器数统计 -->
	<div class="chart-container">
		<chart :id="id" height="100%" width="100%" :chartData="picChartData" />
		<div class="tl-corner"></div>
		<div class="tr-corner"></div>
		<div class="bl-corner"></div>
		<div class="br-corner"></div>
	</div>
</template>

<script>
import Chart from '@/components/Charts/PieChart'

export default {
	name: 'ApplianceChart',
	components: { Chart },
	props: {
		chartData: {
			type: Object,
		},
	},
	data() {
		return {
			id: 'ApplianceChart',
			picChartData: null,
		}
	},
	created() {
		// console.log(this.chartData)
		this.picChartData = this.chartData
	},
	watch: {
		chartData() {
			// console.log(this.chartData)
			this.picChartData = this.chartData
		},
	},
}
</script>

<style lang="stylus" scoped>
.chart-container
	position: relative;
	width: 100%;
	/* height: calc(100vh - 84px); */
	height: 100%;
	.tr-corner {
    width 0.1rem
    height 0.1rem
    position absolute
    right: -0.01rem;
    top: -0.01rem;
    border-top: 0.01rem solid #fff;
    border-right: 0.01rem solid #fff;
}
.tl-corner {
    position absolute
    width 0.1rem
    height 0.1rem
    left: -0.01rem;
    top: -0.01rem;
    border-top: 0.01rem solid #fff;
    border-left: 0.01rem solid #fff;
}
.tr-corner {
    width 0.1rem
    height 0.1rem
    position absolute
    right: -0.01rem;
    top: -0.01rem;
    border-top: 0.01rem solid #fff;
    border-right: 0.01rem solid #fff;
}
.bl-corner {
    width 0.1rem
    height 0.1rem
    position absolute
    left: -0.01rem;
    bottom: -0.01rem;
    border-bottom: 0.01rem solid #fff;
    border-left: 0.01rem solid #fff;
}
.br-corner {
    width 0.1rem
    height 0.1rem
    position absolute
    right: -0.01rem;
    bottom: -0.01rem;
    border-bottom: 0.01rem solid #fff;
    border-right: 0.01rem solid #fff;
}
</style>
